<template>
  <el-dialog
    title="参数设置"
    :visible.sync="dialogVisible"
    width="1000px"
  >
    <el-empty v-if="tableData.length === 0" description="暂无任何计算结果">
      <file-upload :action="uploadUrl" :name="name" @onSuccess="onSuccess" />
    </el-empty>
    <div v-else>
      <el-table
        border
        :data="tableData"
        stripe
        style="width: 100%"
        :height="600"
      >
        <el-table-column
          prop="lng"
          label="经度"
          align="center"
        />
        <el-table-column
          prop="lat"
          label="纬度"
          align="center"
        />
        <el-table-column
          prop="value"
          label="值"
          align="center"
        />
      </el-table>
      <div class="h12" />
      <div>
        <el-button type="primary" @click="addOne">保存</el-button>
        <el-button type="success" @click="addLayer">数据处理</el-button>
        <el-button type="default" @click="reCompute">重置</el-button>
      </div>
    </div>
    <el-dialog
      title="输入名称"
      :visible.sync="dialogAddVisible"
      width="30%"
      append-to-body
    >
      <el-input v-model="postData.name" placeholder="名称" clearable />
      <div class="h12" />
      <el-button type="primary" @click="submit">提交</el-button>
    </el-dialog>
  </el-dialog>
</template>

<script>
import FileUpload from '@/components/FileUpload'
import * as turf from '@turf/turf'
import { mapGetters } from 'vuex'
import { addOne } from '@/api/gridPartition'
export default {
  components: {
    FileUpload
  },
  data() {
    return {
      tableData: [],
      uploadUrl: 'https://api.zesi.com.cn/idata/util/upload',
      name: 'uav',
      grid: [],
      dialogVisible: false,
      dialogAddVisible: false,
      gridTypeId: null,
      postData: {
        name: '',
        grid_type_id: '',
        data: null,
        datetimerange: null
      }
    }
  },
  computed: {
    ...mapGetters(['project']),
    circlePolygon() {
      const center = [this.project.lng, this.project.lat]
      const radius = 0.1499
      const options = { steps: 100, units: 'kilometers', properties: { foo: 'bar' }}
      return turf.circle(center, radius, options)
    }
  },
  methods: {
    addOne() {
      this.dialogAddVisible = true
    },
    async submit() {
      this.postData.grid_type_id = this.gridTypeId
      this.postData.data = this.tableData
      if (!this.postData.name) {
        this.$message.error('请输入名称')
      }
      const { msg } = await addOne(this.postData)
      this.$message.success(msg)
      this.dialogAddVisible = false
    },
    show(gridTypeId) {
      this.dialogVisible = true
      this.gridTypeId = gridTypeId
    },
    hide() {
      this.dialogVisible = false
    },
    reCompute() {
      this.tableData = []
    },
    onSuccess(response, file) {
      const { errorCode, msg, data } = response
      if (errorCode !== 0) {
        this.$message({
          message: (msg && `上传失败，失败原因：${msg}`) || '上传失败',
          type: 'error'
        })
        this.$emit('onError', data)
      } else {
        this.$message({
          message: '上传成功',
          type: 'success'
        })
        this.tableData = data
      }
    },
    addLayer() {
      this.$emit('addLayer', this.tableData)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
